<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            /* background-color: #8797a4; */
            overflow: hidden;
        }
        #info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}
    </style>
</head>
<body>

<script src="build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/WebGL.js"></script>

<script>

    if ( WEBGL.isWebGLAvailable() === false ) {
    document.body.appendChild( WEBGL.getWebGLErrorMessage() );
    }
    
    var camera, controls, scene, renderer;

    init();
    animate();

    function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0x8797a4 );
		// scene.fog = new THREE.FogExp2( 0x8797a4, 0.002 );  

        renderer = new THREE.WebGLRenderer({ antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.shadowMapEnabled = true;//开启阴影，加上阴影渲染
        document.body.appendChild( renderer.domElement );

        // camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 1000 );
        camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -1000, 2000 );
        camera.position.set( 200 , 180 , 200 );
        camera.lookAt({ x : 0,y : 0,z : 0});

        controls = new THREE.OrbitControls( camera, renderer.domElement );

        //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)

        controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
        controls.dampingFactor = 0.25;

        controls.screenSpacePanning = false;

        controls.minDistance = 100;
        controls.maxDistance = 500;

        controls.maxPolarAngle = Math.PI / 2;

        light = new THREE.AmbientLight( 0xFFFFFF,0.4 );
        scene.add( light );

        light2 = new THREE.DirectionalLight(0xFFFFFF,1);
        light2.position.set(3,4,2);
        light2.castShadow = true;//开启灯光投射阴影
        scene.add(light2);

        ground = creatGround(0,0,0x8797a4)

        // color:bai lv #ffffff #649569
        // color:bai hui #ffffff #979797
        // color:qianhui shenhui #afafaf #686868
        // color:wechatlv #64a934
        // meshTop.position.set(x,y+50,z);
        // meshLeft.position.set(x,y+25,z+50);
        // meshRight.position.set(x+50,y+25,z);
        // material2.transparent = true;

        // 玩家
        // player = creatcubeplayer(-150,0);

        //条纹box 9
        cube10 = creatcube10(-450,0);
        cube11 = creatcube11(-150,0);
        cube12 = creatcube12(-300,0);
        cube13 = creatcube13(-300,-150);
        cube14 = creatcube14(-450,-150);
        cube15 = creatcube15(-600,0);
        cube16 = creatcube16(-750,0);
        cube17 = creatcube17(-750,-150);
        cube18 = creatcube18(-150,-150);

        //异形box 7
        cube21 = creatcube21(0,-450);
        cube22 = creatcube22(-150,-450);
        cube23 = creatcube23(-300,-450);
        cube24 = creatcube24(-450,-450);
        cube25 = creatcube25(-600,-450);
        cube26 = creatcube26(-750,-450);
        cube27 = creatcube27(-900,-450);
        
        //贴图box 7
        cube01 = creatcube01(0,-300);
        cube02 = creatcube02(-150,-300);
        cube03 = creatcube03(-300,-300);
        cube04 = creatcube04(-450,-300);
        cube05 = creatcube05(-600,-300);
        cube06 = creatcube06(-750,-300);
        cube07 = creatcube07(-900,-300);
        
        //柱状体 5
        desk = creatdesk(0,-600);
        desk2 = creatdesk2(-150,-600);
        cylinder = creatcylinder(-300,-600);
        cylinder2 = creatcylinder2(-450,-600);
        cup = creatcup(-600,-600);

        cube01 = creatcube01(0,0);
        player = creatcubeplayer(0,0);
        console.log(scene);


        window.addEventListener( 'resize', onWindowResize, false );
    }

    function creatcubeplayer(x,z) {
        var geometry = new THREE.SphereGeometry(9, 30, 30);
        var texture = new THREE.TextureLoader().load( "source/head.png" );
        var material = new THREE.MeshLambertMaterial({map:texture});
        mesh = new THREE.Mesh( geometry,material );
        mesh.position.set(x,106,z);
        mesh.rotation.y =  Math.PI / 2;

        geometry = new THREE.SphereGeometry(11.5, 30, 30, 0, Math.PI * 2, 0, Math.PI / 3);
        texture = new THREE.TextureLoader().load( "source/head1.png" );
        material = new THREE.MeshLambertMaterial({map:texture});
        mesh3 = new THREE.Mesh( geometry,material );
        mesh3.position.set(x,78,z);
        mesh3.rotation.y =  Math.PI*7 / 10;

        geometry = new THREE.CylinderGeometry(10, 9, 8, 30);
        texture = new THREE.TextureLoader().load( "source/top.png" );
        material = new THREE.MeshLambertMaterial({map:texture});
        mesh1 = new THREE.Mesh(geometry,material );
        mesh1.position.set(x,80,z);
        mesh1.rotation.y = - Math.PI / 4;

        geometry = new THREE.CylinderGeometry(9, 12, 26, 30);
        texture = new THREE.TextureLoader().load( "source/bottom.png" );
        material = new THREE.MeshLambertMaterial({map:texture});
        mesh2 = new THREE.Mesh(geometry,material );
        mesh2.position.set(x,63,z);
        mesh2.rotation.y = - Math.PI / 3;

        group = new THREE.Object3D();
        group.add(mesh,mesh1,mesh2,mesh3);
        scene.add(group);
        return group;
    }

    function creatcube10(x,z) {
        group = canvasTwoFace_5stripe(x,z,0xffffff,"#ffffff","#979797");
        return group;     
    }

    function creatcube11(x,z) {
        group = canvasTwoFace_5stripe(x,z,0x686868,"#686868","#afafaf");
        return group;     
    }

    function creatcube12(x,z) {
        group = canvasTwoFace_3stripe(x,z,0x686868,"#686868","#afafaf");
        return group;     
    }

    function creatcube13(x,z) {
        group = canvasTwoFace_3stripe(x,z,0x649569,"#649569","#ffffff");
        return group;     
    }

    function creatcube14(x,z) {
        group = canvasTwoFace_5stripe(x,z,0x649569,"#649569","#ffffff");
        return group;     
    }

    function creatcube15(x,z) {
        group = canvasTwoFace_circle(x,z,0x686868,"#686868","#afafaf");
        return group;     
    }

    function creatcube16(x,z) {
        group = canvasTwoFace_circle(x,z,0xffffff,"#ffffff","#979797");
        return group;     
    }

    function creatcube17(x,z) {
        group = canvasTwoFace_circle(x,z,0x649569,"#649569","#ffffff");
        return group;     
    }

    function creatcube18(x,z) {
        group = canvasTwoFace_3stripe(x,z,0xffffff,"#ffffff","#979797");
        return group;     
    }

    function creatcube01(x,z) {
        var canvas = document.createElement('canvas');
        canvas.width=100;
        canvas.height=50;
        var ctx = canvas.getContext('2d');
        ctx.rect(0,0,100,50);
        ctx.fillStyle="#e86014";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(40,25,18,0,2*Math.PI);
        ctx.fillStyle="#ffffff";
        ctx.fill();           
        ctx.beginPath();
        ctx.arc(45,20,6,0,2*Math.PI);
        ctx.fillStyle="#e86014";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(65,10,6,0,2*Math.PI);
        ctx.fillStyle="#ffffff";
        ctx.fill();
        var texture = new THREE.Texture(canvas);       
        group = canvasOneFace(x,z,texture,0xe86014);
        return group;
    }

    function creatcube02(x,z) {
        group = allPicThreeFace(x, z, "source/express.png", 50)
        return group;
    }

    function creatcube03(x,z) {
        var geometry = new THREE.CubeGeometry( 100, 50, 100);
        var material = new THREE.MeshLambertMaterial( { color:0xf64850} );
        mesh = new THREE.Mesh( geometry,material);
        mesh.position.set(x,25,z);
        var geometry = new THREE.PlaneGeometry( 32,32 );
        var texture = new THREE.TextureLoader().load( "source/money.png" );
        var material = new THREE.MeshLambertMaterial({map:texture});
        mesh2 = new THREE.Mesh( geometry,material);
        mesh2.rotation.y =  Math.PI / 2;
        mesh2.position.set(x+50.01,25,z);
        Shadow =  makeShadow(x,z);
        group = new THREE.Object3D();
        group.add(mesh2,mesh,Shadow);
        scene.add(group);
        return group;
    }

    function creatcube04(x,z) {
        group = allPicThreeFace(x, z, "source/dict.png", 50)
        return group;
    }

    function creatcube05(x,z) {
        var geometry = new THREE.CubeGeometry( 100, 50, 100);
        var texture = new THREE.TextureLoader().load( "source/bag.png" );
        var material = new THREE.MeshLambertMaterial({map:texture});
        mesh = new THREE.Mesh( geometry,material);
        mesh.position.set(x,25,z);
        Shadow =  makeShadow(x,z);
        group = new THREE.Object3D();
        group.add(mesh,Shadow);
        scene.add(group);
        return group;
    }

    function creatcube06(x,z) {
        group = allPicThreeFace(x, z, "source/tit.png", 50)
        return group; 
    }

    function creatcube21(x,z) {
        var geometry = new THREE.CubeGeometry( 100, 50, 100);
        var material = new THREE.MeshLambertMaterial( { color:0x64a934} );
        mesh = new THREE.Mesh( geometry,material);
        mesh.position.set(x,25,z);
        geometry = new THREE.PlaneGeometry( 100,50 );
        var texture = new THREE.TextureLoader().load( "source/green_face.png" );
        material = new THREE.MeshLambertMaterial({map:texture});
        material.transparent = true;
        mesh2 = new THREE.Mesh( geometry,material );
        mesh2.rotation.y =  Math.PI / 2;
        mesh2.position.set(x+50.01,25,z);

        geometry = new THREE.CubeGeometry( 40, 30, 15);
        material = new THREE.MeshLambertMaterial( { color:0x64a934} );
        var mesh3 = new THREE.Mesh( geometry,material);
        mesh3.position.set(x+22,31,z+58);
        mesh3.rotation.x = - Math.PI / 4;
        var mesh4 = mesh3.clone();
        mesh4.position.set(x+22,31,z+58-112);
        mesh4.rotation.x =  Math.PI / 4;
        Shadow =  makeShadow(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh2,mesh3,mesh4,Shadow);
        scene.add(group);
        return group;
    }

    function creatcube22(x,z) {
        var geometry = new THREE.CubeGeometry( 100, 50, 100);
        var material = new THREE.MeshLambertMaterial( { color:0xd4c836} );
        mesh = new THREE.Mesh( geometry,material);
        mesh.position.set(x,25,z);

        geometry = new THREE.CylinderGeometry(20, 20, 10, 30, 3, true);
        material = new THREE.MeshLambertMaterial({ color:0xd4c836});
        mesh1 = new THREE.Mesh(geometry,material);
        mesh1.position.set(x,25,z+55);
        mesh1.rotation.x =  -Math.PI / 2;
        var geometry = new THREE.PlaneGeometry( 20, 20 );
        var texture = new THREE.TextureLoader().load( "source/emotion.png" );
        var material = new THREE.MeshBasicMaterial( {map:texture} );
        material.transparent = true;
        var mesh3 = new THREE.Mesh( geometry, material );
        mesh3.position.set(x,25,z+55.01);

        mesh2 = mesh1.clone();
        mesh2.position.set(x+55,25,z);
        mesh2.rotation.z =  Math.PI / 2;
        mesh4 = mesh3.clone();
        mesh4.position.set(x+55.01,25,z);
        mesh4.rotation.y =  Math.PI / 2;
        Shadow =  makeShadow(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh1,mesh2,mesh3,mesh4,Shadow);
        scene.add(group);
        return group;
    }

    function creatcube23(x,z) {
        var geometry = new THREE.CubeGeometry( 100, 50, 100);
        var material = new THREE.MeshLambertMaterial( { color:0xffffff} );
        mesh = new THREE.Mesh( geometry,material);
        mesh.position.set(x,25,z);
        var geometry = new THREE.PlaneGeometry( 100, 50, 1, 1 );
        var texture = new THREE.TextureLoader().load( "source/clock.png" );
        var material = new THREE.MeshLambertMaterial({map:texture});
        mesh1 = new THREE.Mesh( geometry,material);
        mesh1.rotation.y =  Math.PI / 2;
        mesh1.position.set(x+50.01, 25,z);
 
        var now = new Date();
        var h = now.getHours();
        var m = now.getMinutes();
        function checkTime(i){
            if (i<10){
                i="0" + i;
            }
            str = i.toString();
        return str;
        }
        var hStr = checkTime(h);
        var hArr = hStr.split("");
        var mStr =checkTime(m);
        var mArr = mStr.split(""); 
        mesh2 = creatTime(hArr[0], 1, x, z);
        mesh3 = creatTime(hArr[1], 2, x, z);
        mesh4 = creatTime(mArr[0], 3, x, z);
        mesh5 = creatTime(mArr[1], 4, x, z);
        function creatTime(h, n, x, z){
            var scr = "source/" + h + ".png";
            if (n == 1){
                return loadImg(scr, 30, x, z);
            }
            if (n == 2){
                return loadImg(scr, 12, x, z);
            }
            if (n == 3){
                return loadImg(scr, -6, x, z);
            }
            if (n == 4){
                return loadImg(scr, -24, x, z);
            }
        }
        function loadImg(scr, d, x, z){
            var geometry = new THREE.PlaneGeometry( 26, 26 );
            var texture = new THREE.TextureLoader().load( scr );
            var material = new THREE.MeshLambertMaterial({map:texture});
            material.transparent = true;
            mesh6 = new THREE.Mesh( geometry, material);
            mesh6.rotation.y =  Math.PI / 2;
            mesh6.position.set(x+50.02, 25, z+d);
            return mesh6;
	    }

        var geometry = new THREE.CylinderGeometry(20, 20, 10, 100, 3, true);
        var texture = new THREE.TextureLoader().load( "source/stripe.png" );
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set( 2, 2 );
        var material = new THREE.MeshLambertMaterial({map:texture});
        mesh7 = new THREE.Mesh(geometry,material);
        mesh7.position.set(x,25,z+55);
        mesh7.rotation.x =  -Math.PI / 2;
        var geometry = new THREE.CircleGeometry( 20, 30 );
        var texture = new THREE.TextureLoader().load( "source/stripe.png" );
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        var material = new THREE.MeshBasicMaterial( {map:texture} );
        material.transparent = true;
        var mesh8 = new THREE.Mesh( geometry, material );
        mesh8.position.set(x,25,z+60);
        Shadow =  makeShadow(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh1,mesh2,mesh3,mesh4,mesh5,mesh7,mesh8,Shadow);
        scene.add(group);
        return group;
    }

    function creatcube24(x,z) {
        var geometry = new THREE.CylinderGeometry(40, 40, 6, 30, 3, true);
        var material = new THREE.MeshLambertMaterial({ color:0x686868});
        mesh = new THREE.Mesh(geometry,material);
        mesh.position.set(x,45,z);
        var geometry = new THREE.CircleGeometry( 40, 30 );
        var texture = new THREE.TextureLoader().load( "source/record.png" );
        var material = new THREE.MeshBasicMaterial( {map:texture} );
        // texture.needsUpdate = true;
        var mesh1 = new THREE.Mesh( geometry, material );
        mesh1.position.set(x,46,z);
        mesh1.rotation.x =  -Math.PI / 2;

        var texture = new THREE.TextureLoader().load(  "source/sing.png" );
        var geometry = new THREE.PlaneGeometry( 100, 100, 1, 1 );
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0,0.34);//图片左下角
        var t2 = new THREE.Vector2(0.66,0.34);//图片右下角
        var t3 = new THREE.Vector2(0.66,1);//图片右上角
        var t0 = new THREE.Vector2(0,1);//图片左上角
        geometry.faceVertexUvs[0].push([t0,t1,t3],[t1,t2,t3]);
        var material = new THREE.MeshLambertMaterial({map:texture});
        mesh2 = new THREE.Mesh( geometry,material );
        mesh2.rotation.x =  -Math.PI / 2;
        mesh2.position.set(x,44,z);
        var geometry = new THREE.PlaneGeometry( 100, 44, 1, 1 );
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0,0);
        var t2 = new THREE.Vector2(0.65,0);
        var t3 = new THREE.Vector2(0.65,0.333);
        var t0 = new THREE.Vector2(0,0.333);
        geometry.faceVertexUvs[0].push([t0,t1,t3],[t1,t2,t3]);
        var material = new THREE.MeshLambertMaterial({map:texture});
        mesh3 = new THREE.Mesh( geometry,material );
        mesh3.position.set(x,44/2,z+50);
        var geometry = new THREE.PlaneGeometry( 100, 44, 1, 1 );
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(1,0.36);
        var t2 = new THREE.Vector2(1,1);
        var t3 = new THREE.Vector2(0.666,1);
        var t0 = new THREE.Vector2(0.666,0.36);
        geometry.faceVertexUvs[0].push([t0,t1,t3],[t1,t2,t3]);
        var material = new THREE.MeshLambertMaterial({map:texture}); 
        mesh4 = new THREE.Mesh( geometry,material );
        mesh4.rotation.y =  Math.PI / 2;
        mesh4.position.set(x+50,44/2,z);
        Shadow =  makeShadow(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh1,mesh2,mesh3,mesh4,Shadow);
        scene.add(group);
        return group;
    }

    function creatcube25(x,z) {
        var geometry = new THREE.CubeGeometry( 100, 50, 100);
        var material = new THREE.MeshLambertMaterial( { color:0xf2f2f2} );
        mesh = new THREE.Mesh( geometry,material);
        mesh.position.set(x,25,z);
        var geometry = new THREE.PlaneGeometry( 66,33 );
        var texture = new THREE.TextureLoader().load( "source/white_face.png" );
        var material = new THREE.MeshLambertMaterial({map:texture});
        material.transparent = true;
        mesh1 = new THREE.Mesh( geometry,material );
        mesh1.rotation.y =  Math.PI / 2;
        mesh1.position.set(x+50.01,20,z);

        var geometry = new THREE.CubeGeometry( 40, 30, 15);
        var material = new THREE.MeshLambertMaterial( { color:0xf2f2f2} );
        var mesh2 = new THREE.Mesh( geometry,material);
        mesh2.position.set(x+22,30,z+58);
        mesh2.rotation.x = - Math.PI / 4;
        var mesh3 = mesh2.clone();
        mesh3.position.set(x+22,31,z+58-112);
        mesh3.rotation.x =  Math.PI / 4;
        Shadow =  makeShadow(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh1,mesh2,mesh3,Shadow);
        scene.add(group);
        return group;
    }

    function creatcube26(x,z) {
        var geometry = new THREE.CubeGeometry( 100, 40, 100);
        var material = new THREE.MeshLambertMaterial({color:0x9175cf});
        mesh = new THREE.Mesh( geometry,material);
        mesh.position.set(x,20,z);

        var texture = new THREE.TextureLoader().load( "source/gift.png" );
        var geometry = new THREE.PlaneGeometry( 110, 110, 1, 1 );
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0,0.25);//图片左下角
        var t2 = new THREE.Vector2(1,0.25);//图片右下角
        var t3 = new THREE.Vector2(1,1);//图片右上角
        var t0 = new THREE.Vector2(0,1);//图片左上角
        geometry.faceVertexUvs[0].push([t0,t1,t3],[t1,t2,t3]);
        var material = new THREE.MeshLambertMaterial({map:texture});
        mesh1 = new THREE.Mesh( geometry,material );
        mesh1.rotation.x =  -Math.PI / 2;
        mesh1.position.set(x,50,z);
        var geometry = new THREE.PlaneGeometry( 110, 16, 1, 1 );
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0,0);
        var t2 = new THREE.Vector2(1,0);
        var t3 = new THREE.Vector2(1,0.25);
        var t0 = new THREE.Vector2(0,0.25);
        geometry.faceVertexUvs[0].push([t0,t1,t3],[t1,t2,t3]);
        var material = new THREE.MeshLambertMaterial({map:texture});
        mesh2 = new THREE.Mesh( geometry,material );
        mesh2.position.set(x,42,z+55);
        var geometry = new THREE.PlaneGeometry( 110, 16, 1, 1 );
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0,0);
        var t2 = new THREE.Vector2(1,0);
        var t3 = new THREE.Vector2(1,0.25);
        var t0 = new THREE.Vector2(0,0.25);
        geometry.faceVertexUvs[0].push([t0,t1,t3],[t1,t2,t3]);
        var materialRight = new THREE.MeshLambertMaterial({map:texture}); 
        mesh3 = new THREE.Mesh( geometry,material );
        mesh3.rotation.y =  Math.PI / 2;
        mesh3.position.set(x+55,42,z);
        Shadow =  makeShadow(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh1,mesh2,mesh3,Shadow);
        scene.add(group);
        return group;
    }

    function creatcube27(x,z) {
        var geometry = new THREE.CubeGeometry( 110, 12, 90);
        var texture = new THREE.TextureLoader().load( "source/stool.png" );
        var material = new THREE.MeshLambertMaterial({map:texture});
        mesh = new THREE.Mesh( geometry,material);
        mesh.position.set(x,44,z);

        var geometry = new THREE.CubeGeometry( 14, 48, 14);
        var material = new THREE.MeshLambertMaterial({map:texture});
        mesh1 = new THREE.Mesh( geometry,material);
        mesh1.position.set(x-34,18,z+34);
        mesh1.rotation.x = - Math.PI / 20;
        mesh1.rotation.z = - Math.PI / 40;
        mesh2 = mesh1.clone();
        mesh2.position.set(x+34,18,z+34);
        mesh2.rotation.z =  Math.PI / 40;
        mesh3 = mesh1.clone();
        mesh3.position.set(x-34,18,z-34);
        mesh3.rotation.x =  Math.PI / 20;
        mesh4 = mesh1.clone();
        mesh4.position.set(x+34,18,z-34);
        mesh4.rotation.x =  Math.PI / 20;
        mesh4.rotation.z =  Math.PI / 40;

        Shadow =  makeShadow_stool(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh1,mesh2,mesh3,mesh4,Shadow);
        scene.add(group);
        return group;
    }

    function creatcube07(x,z) {
        var geometry = new THREE.CubeGeometry( 120, 50, 100);
        var material = new THREE.MeshLambertMaterial( { color:0x8e8e8e} );
        mesh = new THREE.Mesh( geometry,material);
        mesh.position.set(x,25,z);
        var geometry = new THREE.PlaneGeometry( 100, 120 );
        var texture = new THREE.TextureLoader().load( "source/disk.png" );
        var material = new THREE.MeshBasicMaterial( {map:texture} );
        var mesh1 = new THREE.Mesh( geometry, material );
        mesh1.position.set(x,50.01,z);
        mesh1.rotation.x =  -Math.PI / 2;
        mesh1.rotation.z =  Math.PI / 2;

        Shadow =  makeShadow2(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh1,Shadow);
        scene.add(group);
        return group;
    }

    function creatdesk(x,z) {
        var geometry = new THREE.CylinderGeometry(50, 50, 6, 30);
        var material = new THREE.MeshLambertMaterial({ color:0xafafaf});
        var mesh = new THREE.Mesh(geometry,material );
        mesh.position.set(x,47,z);
        var geometry = new THREE.CylinderGeometry(10, 30, 49, 30);
        var material = new THREE.MeshLambertMaterial({ color:0x686868});
        mesh1 = new THREE.Mesh(geometry,material );
        mesh1.position.set(x,25,z);
        Shadow =  makeShadow_desk(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh1,Shadow);
        scene.add(group);
        return group;
    }
    
    function creatdesk2(x,z) {
        var geometry = new THREE.CylinderGeometry(50, 50, 6, 30);
        var material = new THREE.MeshLambertMaterial({ color:0x686868});
        mesh = new THREE.Mesh(geometry,material );
        mesh.position.set(x,47,z);
        var geometry = new THREE.CylinderGeometry(10, 30, 49, 30);
        var material = new THREE.MeshLambertMaterial({ color:0x979797});
        mesh1 = new THREE.Mesh(geometry,material );
        mesh1.position.set(x,25,z);
        Shadow =  makeShadow_desk(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh1,Shadow);
        scene.add(group);
        return group;
    }

    function creatcylinder(x,z) {
        group = creatcylinder_canvas(x,z,"#ffffff","#979797",0xffffff,0x979797);
        return group; 
    }

    function creatcylinder2(x,z) {
        group = creatcylinder_canvas(x,z,"#649569","#7bc487",0x649569,0xffffff);
        return group; 
    }

    function creatcup(x,z) {
        var geometry = new THREE.CylinderGeometry(30, 36, 10, 30, 3, true);
        var material = new THREE.MeshLambertMaterial({ color:0x464646});
        mesh = new THREE.Mesh(geometry,material);
        mesh.position.set(x,45,z);
        var geometry = new THREE.CircleGeometry( 30, 30 );
        var texture = new THREE.TextureLoader().load( "source/westore_desk.png" );
        var material = new THREE.MeshBasicMaterial( {map:texture} );
        // texture.needsUpdate = true;
        var mesh1 = new THREE.Mesh( geometry, material );
        mesh1.position.set(x,50,z);
        mesh1.rotation.x =  -Math.PI / 2;
        mesh1.rotation.z =  Math.PI / 4;
        var geometry = new THREE.CylinderGeometry(32, 20, 40, 30, 3, true);
        var texture = new THREE.TextureLoader().load( "source/westore.png" );
        var material = new THREE.MeshBasicMaterial( {map:texture} );
        texture.needsUpdate = true;
        mesh2 = new THREE.Mesh(geometry,material );
        mesh2.position.set(x,20,z);
        mesh2.rotation.y =  -3* Math.PI / 4;
        Shadow =  makeShadow_cup(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh1,mesh2,Shadow);
        scene.add(group);
        return group;
    }

    function creatGround(x,z,color){
        var geometry = new THREE.PlaneGeometry( 5000, 5000, 1, 1 );
        var material = new THREE.MeshLambertMaterial({ color:color});
        mesh = new THREE.Mesh( geometry,material );
        mesh.rotation.x =  -Math.PI / 2;
        mesh.position.set(x,-0.01,z);
        scene.add(mesh);
        return mesh;
    }

    function topPlane_color(x,z,topcolor){
        var geometry = new THREE.PlaneGeometry( 100, 100, 1, 1 );
        var material = new THREE.MeshLambertMaterial({ color:topcolor});
        mesh = new THREE.Mesh( geometry,material);
        mesh.rotation.x =  -Math.PI / 2;
        mesh.position.set(x,50,z);
        return mesh;
    }

    function makeShadow(x,z){
        var geometry = new THREE.PlaneGeometry( 116, 160, 1, 1 );
        var texture = new THREE.TextureLoader().load( "source/shadow.png" );
        var material = new THREE.MeshBasicMaterial({map:texture});
        material.transparent = true;
        meshShadow = new THREE.Mesh( geometry,material);
        meshShadow.rotation.x =  -Math.PI / 2;
        meshShadow.rotation.z =  Math.PI / 2 ;
        meshShadow.position.set( x-30 , 0 , z+6 );
        return meshShadow;
    }

    function makeShadow2(x,z){
        var geometry = new THREE.PlaneGeometry( 112, 180, 1, 1 );
        var texture = new THREE.TextureLoader().load( "source/shadow.png" );
        var material = new THREE.MeshBasicMaterial({map:texture});
        material.transparent = true;
        meshShadow = new THREE.Mesh( geometry,material);
        meshShadow.rotation.x =  -Math.PI / 2;
        meshShadow.rotation.z =  Math.PI / 2 ;
        meshShadow.position.set( x-30 , 0 , z+8 );
        return meshShadow;
    }

    function makeShadow_cylinder(x,z){
        var geometry = new THREE.PlaneGeometry( 90, 130, 1, 1 );
        var texture = new THREE.TextureLoader().load( "source/cylinder_shadow.png" );
        var material = new THREE.MeshBasicMaterial({map:texture});
        material.transparent = true;
        meshShadow = new THREE.Mesh( geometry,material);
        meshShadow.rotation.x =  -Math.PI / 2;
        meshShadow.rotation.z =  Math.PI / 2 ;
        meshShadow.position.set( x-30 , 0 , z+8 );
        return meshShadow;
    }

    function makeShadow_cup(x,z){
        var geometry = new THREE.PlaneGeometry( 50, 80, 1, 1 );
        var texture = new THREE.TextureLoader().load( "source/cylinder_shadow.png" );
        var material = new THREE.MeshBasicMaterial({map:texture});
        material.transparent = true;
        meshShadow = new THREE.Mesh( geometry,material );
        meshShadow.rotation.x =  -Math.PI / 2;
        meshShadow.rotation.z =  Math.PI / 2 ;
        meshShadow.position.set( x-30 , 0 , z+8 );
        return meshShadow;
    }

    function makeShadow_desk(x,z){
        var geometry = new THREE.PlaneGeometry( 90, 140, 1, 1 );
        var texture = new THREE.TextureLoader().load( "source/desk_shadow.png" );
        var material = new THREE.MeshBasicMaterial({map:texture});
        material.transparent = true;
        meshShadow = new THREE.Mesh( geometry,material );
        meshShadow.rotation.x =  -Math.PI / 2;
        meshShadow.rotation.z =  Math.PI / 2 ;
        meshShadow.position.set( x-45 ,0 , z+5 );
        return meshShadow;
    }

    function makeShadow_stool(x,z){
        var geometry = new THREE.PlaneGeometry( 100, 130, 1, 1 );
        var texture = new THREE.TextureLoader().load( "source/stool_shadow.png" );
        var material = new THREE.MeshBasicMaterial({map:texture});
        material.transparent = true;
        meshShadow = new THREE.Mesh( geometry,material);
        meshShadow.rotation.x =  -Math.PI / 2;
        meshShadow.rotation.z =  Math.PI / 2 ;
        meshShadow.position.set( x-36 ,0 , z+4 );
        return meshShadow;
    }

    function canvasOneFace(x,z,texture,color) {
        var geometry = new THREE.CubeGeometry( 100, 50, 100);
        var material = new THREE.MeshLambertMaterial( { color:color} );
        mesh = new THREE.Mesh( geometry,material);
        mesh.position.set(x,25,z);
        var geometry = new THREE.PlaneGeometry( 100,50 );
        var material = new THREE.MeshLambertMaterial({map:texture});
        texture.needsUpdate = true;
        mesh1 = new THREE.Mesh( geometry,material);
        mesh1.rotation.y =  Math.PI / 2;
        mesh1.position.set(x+50.01,25,z);
        Shadow =  makeShadow();
        Shadow.position.set( x-30 , 0 , z+8 );
        group = new THREE.Object3D();
        group.add(mesh,mesh1,Shadow);
        scene.add(group);
        return group;
    }

    function canvasTwoFace(x,z,texture,topColor){
            var mesh = topPlane_color(x,z,topColor);
            var geometry = new THREE.PlaneGeometry( 100, 50, 1, 1 );
            var material = new THREE.MeshLambertMaterial({map:texture});
            texture.needsUpdate = true;
            mesh1 = new THREE.Mesh( geometry,material);
            mesh1.position.set(x,25,z+50);
            var mesh2 = mesh1.clone();
            mesh2.rotation.y =  Math.PI / 2;
            mesh2.position.set(x+50,25,z);
            Shadow =  makeShadow();
            Shadow.position.set( x-30 ,0 , z+8 );
            group = new THREE.Object3D();
            group.add(mesh,mesh1,mesh2,Shadow);
            scene.add(group);
            return group;
    }

    function canvasTwoFace_circle(x,z,colorTop,colorTop2,color) {
            var mesh = topPlane_color(x,z,colorTop);
            var geometry = new THREE.PlaneGeometry( 100, 50, 1, 1 );
            var canvas = document.createElement('canvas');
            canvas.width=100;
            canvas.height=50;
            var ctx = canvas.getContext('2d');
            ctx.rect(0,0,100,50);
            ctx.fillStyle=colorTop2;
            ctx.fill();         
            ctx.beginPath();
            ctx.arc(50,25,20,0,2*Math.PI);
            ctx.fillStyle=color;
            ctx.fill();
            ctx.beginPath();
            ctx.arc(50,25,10,0,2*Math.PI);
            ctx.fillStyle=colorTop2;
            ctx.fill();
            var texture = new THREE.Texture(canvas);
            var material = new THREE.MeshLambertMaterial({map:texture});
            texture.needsUpdate = true;
            mesh1 = new THREE.Mesh( geometry,material );
            mesh1.position.set(x,25,z+50);
            var mesh2 = mesh1.clone();
            mesh2.rotation.y =  Math.PI / 2;
            mesh2.position.set(x+50,25,z);
            Shadow =  makeShadow();
            Shadow.position.set( x-30 , 0 , z+8 );
            group = new THREE.Object3D();
            group.add(mesh,mesh1,mesh2,Shadow);
            scene.add(group);
            return group;
    }

     function canvasTwoFace_5stripe(x,z,colorTop,colorTop2,color) {
        var canvas = document.createElement('canvas');
        canvas.width=100;
        canvas.height=50;
        var ctx = canvas.getContext('2d');
        ctx.fillStyle=colorTop2;
        ctx.fillRect(0,0,100,10);
        ctx.fillStyle=color;
        ctx.fillRect(0,10,100,10);
        ctx.fillStyle=colorTop2;
        ctx.fillRect(0,20,100,10);
        ctx.fillStyle=color;
        ctx.fillRect(0,30,100,10);
        ctx.fillStyle=colorTop2;
        ctx.fillRect(0,40,100,10);
        var texture = new THREE.Texture(canvas);
        group = canvasTwoFace(x,z,texture,colorTop);
        return group;
    }

    function canvasTwoFace_3stripe(x,z,colorTop,colorTop2,color) {
        var canvas = document.createElement('canvas');
        canvas.width=100;
        canvas.height=50;
        var ctx = canvas.getContext('2d');
        ctx.fillStyle=colorTop2;
        ctx.fillRect(0,0,100,10);
        ctx.fillStyle=color;
        ctx.fillRect(0,10,100,30);
        ctx.fillStyle=colorTop2;
        ctx.fillRect(0,40,100,10);
        var texture = new THREE.Texture(canvas);
        group = canvasTwoFace(x,z,texture,colorTop);
        return group;
    }

    function creatcylinder_canvas(x,z,colorTop,colorTop2,color,color2){
        var geometry = new THREE.CylinderGeometry(40, 40, 44, 30, 3, true);
        var material = new THREE.MeshLambertMaterial({ color:color2});
        mesh = new THREE.Mesh(geometry,material );
        mesh.position.set(x,22,z);
        var geometry = new THREE.CylinderGeometry(40, 40, 6, 30, 3, true);
        var material = new THREE.MeshLambertMaterial({ color:color});
        mesh1 = new THREE.Mesh(geometry,material);
        mesh1.position.set(x,47,z);
        var geometry = new THREE.CircleGeometry( 40, 30 );
        var canvas = document.createElement('canvas');
        canvas.width=80;
        canvas.height=80;
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(40,40,42,0,2*Math.PI);
        ctx.fillStyle=colorTop;
        ctx.fill();
        ctx.beginPath();
        ctx.arc(42,42,30,0,2*Math.PI);
        ctx.fillStyle=colorTop2;
        ctx.fill();
        ctx.beginPath();
        ctx.arc(42,42,20,0,2*Math.PI);
        ctx.fillStyle=colorTop;
        ctx.fill();
        var texture = new THREE.Texture(canvas);
        var material = new THREE.MeshBasicMaterial( {map:texture} );
        texture.needsUpdate = true;
        var mesh2 = new THREE.Mesh( geometry, material );
        mesh2.position.set(x,50,z);
        mesh2.rotation.x =  -Math.PI / 2;
        Shadow =  makeShadow_cylinder(x,z);
        group = new THREE.Object3D();
        group.add(mesh,mesh1,mesh2,Shadow);
        scene.add(group);
        return group;
    }

    function allPicThreeFace(x,z,picture,h) {
            var texture = new THREE.TextureLoader().load( picture );
            var geometry = new THREE.PlaneGeometry( 100, 100, 1, 1 );
            geometry.faceVertexUvs[0] = [];
            var t1 = new THREE.Vector2(0,0.34);//图片左下角
            var t2 = new THREE.Vector2(0.66,0.34);//图片右下角
            var t3 = new THREE.Vector2(0.66,1);//图片右上角
            var t0 = new THREE.Vector2(0,1);//图片左上角
            geometry.faceVertexUvs[0].push([t0,t1,t3],[t1,t2,t3]);
            var material = new THREE.MeshLambertMaterial({map:texture});
            mesh = new THREE.Mesh( geometry,material);
            mesh.rotation.x =  -Math.PI / 2;
            mesh.position.set(x,h,z);
            var geometry = new THREE.PlaneGeometry( 100, h, 1, 1 );
            geometry.faceVertexUvs[0] = [];
            var t1 = new THREE.Vector2(0,0);
            var t2 = new THREE.Vector2(0.65,0);
            var t3 = new THREE.Vector2(0.65,0.333);
            var t0 = new THREE.Vector2(0,0.333);
            geometry.faceVertexUvs[0].push([t0,t1,t3],[t1,t2,t3]);
            var material = new THREE.MeshLambertMaterial({map:texture});
            mesh1 = new THREE.Mesh( geometry,material);
            mesh1.position.set(x,h/2,z+50);
            var geometry = new THREE.PlaneGeometry( 100, h, 1, 1 );
            geometry.faceVertexUvs[0] = [];
            var t1 = new THREE.Vector2(1,0.36);
            var t2 = new THREE.Vector2(1,1);
            var t3 = new THREE.Vector2(0.666,1);
            var t0 = new THREE.Vector2(0.666,0.36);
            geometry.faceVertexUvs[0].push([t0,t1,t3],[t1,t2,t3]);
            var material = new THREE.MeshLambertMaterial({map:texture}); 
            mesh2 = new THREE.Mesh( geometry,material);
            mesh2.rotation.y =  Math.PI / 2;
            mesh2.position.set(x+50,h/2,z);
            Shadow =  makeShadow();
            Shadow.position.set( x-30 , 0 , z+8 );
            group = new THREE.Object3D();
            group.add(mesh, mesh1, mesh2,Shadow);
            scene.add(group);
            return group;  
    }

    function onWindowResize() {
        width = document.body.clientWidth;
        height = document.body.clientHeight;
        camera.left = width / - 2;
        camera.right = width /  2;
        camera.top = height / 2;
        camera.bottom = height /  -2;
        camera.updateProjectionMatrix();
        renderer.setSize( width,height );
    }

    function animate() {
        requestAnimationFrame( animate );
        controls.update();
        render();
    }

    function render() {
    renderer.render( scene, camera );
    }


</script>
<div id="info">跳一跳</div>
</body>
</html>

